<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>杨宗英 | 设计师作品集</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#111111',
                        secondary: '#666666',
                        accent: '#007AFF',
                        neutral: '#F5F5F5',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-balance {
                text-wrap: balance;
            }
            .animate-fade-in {
                animation: fadeIn 0.8s ease-in-out forwards;
            }
            .animate-slide-up {
                animation: slideUp 0.8s ease-out forwards;
            }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideUp {
            from { transform: translateY(30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
    </style>
</head>
<body class="font-inter bg-white text-primary antialiased">
    <!-- Navigation -->
    <header id="navbar" class="fixed w-full z-50 transition-all duration-300 py-4">
        <div class="container mx-auto px-6 md:px-12 flex justify-between items-center">
            <a href="#" class="text-2xl font-bold tracking-tight">杨宗英</a>
            <nav class="hidden md:flex space-x-8">
                <a href="#about" class="text-sm uppercase tracking-widest hover:text-accent transition-colors">关于我</a>
                <a href="#skills" class="text-sm uppercase tracking-widest hover:text-accent transition-colors">技能</a>
                <a href="#experience" class="text-sm uppercase tracking-widest hover:text-accent transition-colors">工作经历</a>
                <a href="#projects" class="text-sm uppercase tracking-widest hover:text-accent transition-colors">项目经验</a>
                <a href="#contact" class="text-sm uppercase tracking-widest hover:text-accent transition-colors">联系我</a>
            </nav>
            <button id="menu-toggle" class="md:hidden text-xl">
                <i class="fa-solid fa-bars"></i>
            </button>
        </div>
        
        <!-- Mobile Menu -->
        <div id="mobile-menu" class="hidden md:hidden bg-white absolute w-full border-t border-gray-100 py-4 animate-fade-in">
            <div class="container mx-auto px-6 flex flex-col space-y-4">
                <a href="#about" class="text-sm uppercase tracking-widest hover:text-accent transition-colors py-2">关于我</a>
                <a href="#skills" class="text-sm uppercase tracking-widest hover:text-accent transition-colors py-2">技能</a>
                <a href="#experience" class="text-sm uppercase tracking-widest hover:text-accent transition-colors py-2">工作经历</a>
                <a href="#projects" class="text-sm uppercase tracking-widest hover:text-accent transition-colors py-2">项目经验</a>
                <a href="#contact" class="text-sm uppercase tracking-widest hover:text-accent transition-colors py-2">联系我</a>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="min-h-screen flex items-center justify-center relative overflow-hidden">
        <div class="container mx-auto px-6 md:px-12 py-24 md:py-0">
            <div class="max-w-4xl mx-auto text-center">
                <h1 class="text-[clamp(2.5rem,8vw,5rem)] font-light leading-tight mb-8 animate-fade-in opacity-0" style="animation-delay: 0.2s">
                    杨宗英 <span class="font-medium">设计师</span>
                </h1>
                <p class="text-[clamp(1rem,3vw,1.25rem)] text-secondary max-w-2xl mx-auto mb-12 text-balance animate-fade-in opacity-0" style="animation-delay: 0.4s">
                    专注于UI/UX设计与前端开发，拥有8年以上设计行业经验，擅长将创意与技术结合打造优质用户体验
                </p>
                <a href="#about" class="inline-block border-2 border-primary px-8 py-3 text-sm uppercase tracking-widest hover:bg-primary hover:text-white transition-all duration-300 animate-fade-in opacity-0" style="animation-delay: 0.6s">
                    了解更多
                </a>
            </div>
        </div>
        
        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
            <a href="#about" class="text-primary">
                <i class="fa-solid fa-chevron-down"></i>
            </a>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="py-24 bg-neutral">
        <div class="container mx-auto px-6 md:px-12">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                <div>
                    <div class="relative">
                        <img src="https://picsum.photos/id/1012/800/1000" alt="设计师照片" class="w-full h-[700px] object-cover">
                        <div class="absolute -bottom-8 -right-8 bg-white p-8 shadow-xl">
                            <p class="text-sm text-secondary mb-2">设计经验</p>
                            <p class="text-4xl font-bold">8+ 年</p>
                        </div>
                    </div>
                </div>
                
                <div>
                    <h2 class="text-[clamp(1.5rem,4vw,2.5rem)] font-light mb-6">关于我</h2>
                    <p class="text-secondary mb-6 leading-relaxed">
                        专注于UI/UX设计与前端开发的设计师，拥有8年以上行业经验，熟练掌握从需求分析到视觉设计再到前端实现的全流程。擅长将创意与技术结合，打造既美观又实用的用户体验。
                    </p>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
                        <div>
                            <h3 class="text-xl font-medium mb-4">基本信息</h3>
                            <ul class="space-y-3 text-sm">
                                <li class="flex items-start">
                                    <span class="w-20 text-secondary">姓名：</span>
                                    <span>杨宗英</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="w-20 text-secondary">性别：</span>
                                    <span>男</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="w-20 text-secondary">出生年月：</span>
                                    <span>1989.09.06</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="w-20 text-secondary">籍贯：</span>
                                    <span>陕西西安</span>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <h3 class="text-xl font-medium mb-4">教育背景</h3>
                            <ul class="space-y-3 text-sm">
                                <li class="flex items-start">
                                    <span class="w-20 text-secondary">毕业院校：</span>
                                    <span>西北大学</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="w-20 text-secondary">学历：</span>
                                    <span>大专</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="w-20 text-secondary">专业：</span>
                                    <span>软件技术</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="w-20 text-secondary">时间：</span>
                                    <span>2009-2011</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap gap-4">
                        <a href="mailto:yang-zongying@qq.com" class="inline-block border-2 border-primary px-6 py-2 text-sm uppercase tracking-widest hover:bg-primary hover:text-white transition-all duration-300">
                            <i class="fa-solid fa-envelope mr-2"></i> 发送邮件
                        </a>
                        <a href="tel:13227727527" class="inline-block border-2 border-primary px-6 py-2 text-sm uppercase tracking-widest hover:bg-primary hover:text-white transition-all duration-300">
                            <i class="fa-solid fa-phone mr-2"></i> 电话联系
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Skills Section -->
    <section id="skills" class="py-24">
        <div class="container mx-auto px-6 md:px-12">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,4vw,2.5rem)] font-light mb-4">专业技能</h2>
                <p class="text-secondary max-w-2xl mx-auto">精通各类设计软件与前端技术，能够独立完成从设计到开发的全流程工作</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Design Tools -->
                <div class="bg-neutral p-8 hover:shadow-xl transition-shadow duration-300">
                    <div class="text-accent text-3xl mb-6">
                        <i class="fa-solid fa-paintbrush"></i>
                    </div>
                    <h3 class="text-xl font-medium mb-4">设计工具</h3>
                    <ul class="space-y-2 text-sm">
                        <li class="flex items-center">
                            <span>Adobe Photoshop CC</span>
                            <div class="ml-auto w-24 h-2 bg-gray-200 rounded-full">
                                <div class="h-2 bg-accent rounded-full" style="width: 95%"></div>
                            </div>
                        </li>
                        <li class="flex items-center">
                            <span>Adobe Illustrator</span>
                            <div class="ml-auto w-24 h-2 bg-gray-200 rounded-full">
                                <div class="h-2 bg-accent rounded-full" style="width: 90%"></div>
                            </div>
                        </li>
                        <li class="flex items-center">
                            <span>Adobe Firework</span>
                            <div class="ml-auto w-24 h-2 bg-gray-200 rounded-full">
                                <div class="h-2 bg-accent rounded-full" style="width: 85%"></div>
                            </div>
                        </li>
                        <li class="flex items-center">
                            <span>CorelDRAW</span>
                            <div class="ml-auto w-24 h-2 bg-gray-200 rounded-full">
                                <div class="h-2 bg-accent rounded-full" style="width: 75%"></div>
                            </div>
                        </li>
                        <li class="flex items-center">
                            <span>Adobe InDesign</span>
                            <div class="ml-auto w-24 h-2 bg-gray-200 rounded-full">
                                <div class="h-2 bg-accent rounded-full" style="width: 80%"></div>
                            </div>
                        </li>
                    </ul>
                </div>
                
                <!-- Frontend Technologies -->
                <div class="bg-neutral p-8 hover:shadow-xl transition-shadow duration-300">
                    <div class="text-accent text-3xl mb-6">
                        <i class="fa-solid fa-code"></i>
                    </div>
                    <h3 class="text-xl font-medium mb-4">前端技术</h3>
                    <ul class="space-y-2 text-sm">
                        <li class="flex items-center">
                            <span>HTML5 / CSS3</span>
                            <div class="ml-auto w-24 h-2 bg-gray-200 rounded-full">
                                <div class="h-2 bg-accent rounded-full" style="width: 90%"></div>
                            </div>
                        </li>
                        <li class="flex items-center">
                            <span>JavaScript / jQuery</span>
                            <div class="ml-auto w-24 h-2 bg-gray-200 rounded-full">
                                <div class="h-2 bg-accent rounded-full" style="width: 85%"></div>
                            </div>
                        </li>
                        <li class="flex items-center">
                            <span>Bootstrap / UIkit</span>
                            <div class="ml-auto w-24 h-2 bg-gray-200 rounded-full">
                                <div class="h-2 bg-accent rounded-full" style="width: 85%"></div>
                            </div>
                        </li>
                        <li class="flex items-center">
                            <span>Vue.js / Element UI</span>
                            <div class="ml-auto w-24 h-2 bg-gray-200 rounded-full">
                                <div class="h-2 bg-accent rounded-full" style="width: 80%"></div>
                            </div>
                        </li>
                        <li class="flex items-center">
                            <span>响应式设计</span>
                            <div class="ml-auto w-24 h-2 bg-gray-200 rounded-full">
                                <div class="h-2 bg-accent rounded-full" style="width: 90%"></div>
                            </div>
                        </li>
                    </ul>
                </div>
                
                <!-- Development Tools -->
                <div class="bg-neutral p-8 hover:shadow-xl transition-shadow duration-300">
                    <div class="text-accent text-3xl mb-6">
                        <i class="fa-solid fa-tools"></i>
                    </div>
                    <h3 class="text-xl font-medium mb-4">开发工具</h3>
                    <ul class="space-y-2 text-sm">
                        <li class="flex items-center">
                            <span>Node.js</span>
                            <div class="ml-auto w-24 h-2 bg-gray-200 rounded-full">
                                <div class="h-2 bg-accent rounded-full" style="width: 75%"></div>
                            </div>
                        </li>
                        <li class="flex items-center">
                            <span>NPM / Yarn</span>
                            <div class="ml-auto w-24 h-2 bg-gray-200 rounded-full">
                                <div class="h-2 bg-accent rounded-full" style="width: 85%"></div>
                            </div>
                        </li>
                        <li class="flex items-center">
                            <span>Webpack</span>
                            <div class="ml-auto w-24 h-2 bg-gray-200 rounded-full">
                                <div class="h-2 bg-accent rounded-full" style="width: 80%"></div>
                            </div>
                        </li>
                        <li class="flex items-center">
                            <span>HBuilder</span>
                            <div class="ml-auto w-24 h-2 bg-gray-200 rounded-full">
                                <div class="h-2 bg-accent rounded-full" style="width: 70%"></div>
                            </div>
                        </li>
                        <li class="flex items-center">
                            <span>版本控制(Git)</span>
                            <div class="ml-auto w-24 h-2 bg-gray-200 rounded-full">
                                <div class="h-2 bg-accent rounded-full" style="width: 85%"></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Experience Section -->
    <section id="experience" class="py-24 bg-neutral">
        <div class="container mx-auto px-6 md:px-12">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,4vw,2.5rem)] font-light mb-4">工作经历</h2>
                <p class="text-secondary max-w-2xl mx-auto">拥有丰富的设计与开发经验，曾在多家科技公司担任设计相关职位</p>
            </div>
            
            <div class="space-y-12">
                <!-- Experience 1 -->
                <div class="bg-white p-8 shadow-lg hover:shadow-xl transition-shadow duration-300">
                    <div class="flex flex-col md:flex-row justify-between mb-6">
                        <div>
                            <h3 class="text-xl font-bold">设计主管</h3>
                            <p class="text-accent">奕霆信息科技有限公司/西安云博汇物联科技公司</p>
                        </div>
                        <div class="mt-2 md:mt-0">
                            <p class="text-secondary">2016.05-至今</p>
                        </div>
                    </div>
                    <p class="text-secondary mb-4">参与设计上海东方公务航空项目，客服管理系统，守帕（帕金森患者管理app），ulyncBiz/ulyncCRM/Ulync等项目视觉把控以及界面设计。</p>
                </div>
                
                <!-- Experience 2 -->
                <div class="bg-white p-8 shadow-lg hover:shadow-xl transition-shadow duration-300">
                    <div class="flex flex-col md:flex-row justify-between mb-6">
                        <div>
                            <h3 class="text-xl font-bold">设计主管</h3>
                            <p class="text-accent">美齐商务有限公司</p>
                        </div>
                        <div class="mt-2 md:mt-0">
                            <p class="text-secondary">2015.05-2016.04</p>
                        </div>
                    </div>
                    <p class="text-secondary mb-4">在公司主导了两个项目，跨境电商和O2O生活类软件，包括APP设计，整体VI，以及APP对应后台等，参与了从前期需求分析到整体视觉把控！并制定视觉规范。</p>
                </div>
                
                <!-- Experience 3 -->
                <div class="bg-white p-8 shadow-lg hover:shadow-xl transition-shadow duration-300">
                    <div class="flex flex-col md:flex-row justify-between mb-6">
                        <div>
                            <h3 class="text-xl font-bold">UI设计/前端开发</h3>
                            <p class="text-accent">云景智游科技有限公司</p>
                        </div>
                        <div class="mt-2 md:mt-0">
                            <p class="text-secondary">2014.05-2015.05</p>
                        </div>
                    </div>
                    <p class="text-secondary mb-4">负责公司PC官网，微信，触屏版，WEB后台等页面设计以及切图。日常宣传平面设计，包括电梯广告，HTML5页面制作，易拉宝，桌牌等。</p>
                </div>
                
                <!-- Experience 4 -->
                <div class="bg-white p-8 shadow-lg hover:shadow-xl transition-shadow duration-300">
                    <div class="flex flex-col md:flex-row justify-between mb-6">
                        <div>
                            <h3 class="text-xl font-bold">UI设计师</h3>
                            <p class="text-accent">上海久壬科技有限公司</p>
                        </div>
                        <div class="mt-2 md:mt-0">
                            <p class="text-secondary">2013.03-2014.05</p>
                        </div>
                    </div>
                    <p class="text-secondary mb-4">公司是上海公司分公司，主要负责研发新的项目！期间参与logo，官网设计，移动端界面设计等所有设计以及研发。参与项目：觅唐蛋糕、武汉未来城热能系统。</p>
                </div>
                
                <!-- Experience 5 -->
                <div class="bg-white p-8 shadow-lg hover:shadow-xl transition-shadow duration-300">
                    <div class="flex flex-col md:flex-row justify-between mb-6">
                        <div>
                            <h3 class="text-xl font-bold">网页设计师/平面设计师</h3>
                            <p class="text-accent">亿豪医疗集团</p>
                        </div>
                        <div class="mt-2 md:mt-0">
                            <p class="text-secondary">2011.03-2013.12</p>
                        </div>
                    </div>
                    <p class="text-secondary mb-4">公司为西安最大的医疗整体运营，营销行业。本人在设计部门，负责医院官网设计，日常活动专题，banner设计。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Projects Section -->
    <section id="projects" class="py-24">
        <div class="container mx-auto px-6 md:px-12">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,4vw,2.5rem)] font-light mb-4">项目经验</h2>
                <p class="text-secondary max-w-2xl mx-auto">以下是我参与的部分代表性项目，展示了我的设计与开发能力</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Project 1 -->
                <div class="bg-neutral group">
                    <div class="overflow-hidden">
                        <img src="https://picsum.photos/id/1/600/400" alt="上海东方公务航空管理系统界面设计" class="w-full h-64 object-cover transform group-hover:scale-105 transition-transform duration-500">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-medium mb-2">上海东方公务航空管理系统</h3>
                        <p class="text-secondary text-sm mb-4">界面设计 | 2014.08-2015.06</p>
                        <p class="text-secondary mb-4">主导web端界面设计，兼前端代码实现！以及对应客户端/管理端等的APP设计。</p>
                    </div>
                </div>
                
                <!-- Project 2 -->
                <div class="bg-neutral group">
                    <div class="overflow-hidden">
                        <img src="https://picsum.photos/id/20/600/400" alt="美齐易商/易家APP界面设计" class="w-full h-64 object-cover transform group-hover:scale-105 transition-transform duration-500">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-medium mb-2">美齐易商/易家APP</h3>
                        <p class="text-secondary text-sm mb-4">整体视觉以及设计 | 2015.11-2016.04</p>
                        <p class="text-secondary mb-4">参与主导1.0到2.0版本的策划，变更。以及功能梳理！从logo开始，整体VI设计，到APP功能梳理，功能以及需求的结合！从用户体验角度对设计进行细细打磨！</p>
                    </div>
                </div>
                
                <!-- Project 3 -->
                <div class="bg-neutral group">
                    <div class="overflow-hidden">
                        <img src="https://picsum.photos/id/26/600/400" alt="中航跨境商城界面设计" class="w-full h-64 object-cover transform group-hover:scale-105 transition-transform duration-500">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-medium mb-2">中航跨境</h3>
                        <p class="text-secondary text-sm mb-4">整体视觉以及设计 | 2015.11-2016.04</p>
                        <p class="text-secondary mb-4">设计网站购物商城，商城合作品牌专题设计以及分销APP，个人购物APP，后台管理系统，商户管理系统等。</p>
                    </div>
                </div>
                
                <!-- Project 4 -->
                <div class="bg-neutral group">
                    <div class="overflow-hidden">
                        <img src="https://picsum.photos/id/28/600/400" alt="农家乐旅游网界面设计" class="w-full h-64 object-cover transform group-hover:scale-105 transition-transform duration-500">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-medium mb-2">农家乐旅游网</h3>
                        <p class="text-secondary text-sm mb-4">设计以及前端 | 2014.08-2015.06</p>
                        <p class="text-secondary mb-4">公司主要做微信对应开发，我负责界面设计，兼前端代码实现！使用HTML5以及CSS3书写响应式布局代码和配合程序开发。</p>
                    </div>
                </div>
                
                <!-- Project 5 -->
                <div class="bg-neutral group">
                    <div class="overflow-hidden">
                        <img src="https://picsum.photos/id/42/600/400" alt="武汉未来城智能楼宇系统界面设计" class="w-full h-64 object-cover transform group-hover:scale-105 transition-transform duration-500">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-medium mb-2">武汉未来城智能楼宇系统</h3>
                        <p class="text-secondary text-sm mb-4">界面设计 | 2014.08-2015.06</p>
                        <p class="text-secondary mb-4">主导界面设计，兼前端代码实现！</p>
                    </div>
                </div>
                
                <!-- Project 6 -->
                <div class="bg-neutral group">
                    <div class="overflow-hidden">
                        <img src="https://picsum.photos/id/48/600/400" alt="觅唐蛋糕项目界面设计" class="w-full h-64 object-cover transform group-hover:scale-105 transition-transform duration-500">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-medium mb-2">觅唐蛋糕</h3>
                        <p class="text-secondary text-sm mb-4">界面设计 | 2013.03-2014.05</p>
                        <p class="text-secondary mb-4">参与logo设计、官网设计和移动端界面设计，负责整体视觉风格的制定和实现。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="py-24 bg-neutral">
        <div class="container mx-auto px-6 md:px-12">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,4vw,2.5rem)] font-light mb-4">联系我</h2>
                <p class="text-secondary max-w-2xl mx-auto">如果您对我的作品感兴趣或有任何问题，请随时与我联系</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-4xl mx-auto">
                <div>
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="text-accent text-xl mr-4 mt-1">
                                <i class="fa-solid fa-envelope"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-medium mb-1">邮箱</h3>
                                <p class="text-secondary">yang-zongying@qq.com</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="text-accent text-xl mr-4 mt-1">
                                <i class="fa-solid fa-phone"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-medium mb-1">电话</h3>
                                <p class="text-secondary">13227727527</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="text-accent text-xl mr-4 mt-1">
                                <i class="fa-solid fa-map-marker-alt"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-medium mb-1">地址</h3>
                                <p class="text-secondary">陕西西安</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <form>
                        <div class="mb-6">
                            <label for="name" class="block text-sm font-medium mb-2">姓名</label>
                            <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-colors">
                        </div>
                        
                        <div class="mb-6">
                            <label for="email" class="block text-sm font-medium mb-2">邮箱</label>
                            <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-colors">
                        </div>
                        
                        <div class="mb-6">
                            <label for="message" class="block text-sm font-medium mb-2">留言</label>
                            <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-colors"></textarea>
                        </div>
                        
                        <button type="submit" class="inline-block border-2 border-primary px-6 py-2 text-sm uppercase tracking-widest hover:bg-primary hover:text-white transition-all duration-300">
                            发送消息
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-primary text-white py-12">
        <div class="container mx-auto px-6 md:px-12">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                <div>
                    <h3 class="text-2xl font-bold mb-4">杨宗英</h3>
                    <p class="text-gray-400 mb-6">UI/UX设计师 & 前端开发</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa-brands fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa-brands fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa-brands fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa-brands fa-behance text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div class="text-right">
                    <p class="text-gray-400">© 2025 杨宗英. 保留所有权利.</p>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('bg-white', 'shadow-md', 'py-2');
                navbar.classList.remove('py-4');
            } else {
                navbar.classList.remove('bg-white', 'shadow-md', 'py-2');
                navbar.classList.add('py-4');
            }
        });
        
        // 移动端菜单切换
        const menuToggle = document.getElementById('menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');
        
        menuToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动菜单
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });
        
        // 滚动动画
        const animateOnScroll = () => {
            const elements = document.querySelectorAll('.animate-slide-up');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.2;
                
                if (elementPosition < screenPosition) {
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }
            });
        };
        
        // 初始触发动画
        animateOnScroll();
        
        // 滚动时触发动画
        window.addEventListener('scroll', animateOnScroll);
    </script>
</body>
</html>
